<template>
  <e-container class="page-search-components" @keyup.enter="handleEnter">
    <slot></slot>
    <a-space class="buttons">
      <a-button v-if="showSearch" @click="handleReset">Reset</a-button>
      <a-button v-if="showReset" class="secondary" @click="handleSearch">Search</a-button>
    </a-space>
  </e-container>
</template>

<script setup>
import EContainer from '@/components/EContainer.vue'
defineProps({
  showSearch: {
    type: Boolean,
    default: true
  },
  showReset: {
    type: Boolean,
    default: true
  }
})
const emits = defineEmits(['reset', 'search'])
const handleReset = () => emits('reset')
const handleSearch = () => emits('search')
const handleEnter = event => {
  if (event.target.tagName === 'INPUT') {
    emits('search')
  }
}
</script>

<style lang="less" scoped>
.page-search-components {
  position: relative;
  min-height: 106px;
  .buttons {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
</style>
